const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const uglify = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 用于将css打包到各自独立的文件中


var config = {
    entry: {
        index: './src/js/index.js',
        jquery: 'jquery',
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'js/[name].js',
        // publicPath: website.publicPath
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: 'style-loader' // 通过<style>引入css
            }, {
                loader: 'css-loader', //  interprets @import and url() like import/require() and will resolve them
                options: {
                    minimize: true // 开启压缩
                }
            }]
        }, {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader?minimize', 'postcss-loader', 'sass-loader']
            })
        }, {
            test: /\.(png|jpg|jpeg|gif|woff|svg|eot|ttf)/i,
            use: [{
                loader: 'url-loader', // 需要先安装file-loader和url-loader
                options: {
                    limit: 5000, // 单位是B，小于5KB时，压缩成base64
                    name: 'asserts/images/[name].[ext]',
                }
            }]
        }, {
            test: /\.(htm|html)$/,
            use: 'html-withimg-loader' // 可以直接在html中写img
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery' // 设置$在所有的入口文件中都可用
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['jquery'], // 对应入口文件中的jquery（单独抽离，如果没有则合并到index.js文件中）
            filename: 'js/[name].js', // 抽离到哪里
        }),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            title: 'test mobile',
            hash: true,
        }),

        new ExtractTextPlugin("stylesheets/[name].css"), // css单独打包到文件
    ],
    devServer: {
        contentBase: path.resolve(__dirname, '/dist'),
        host: 'localhost',
        port: 3030
    }
};



// 用于处理js文件，这里只在生产模式下进行处理，否则太耗时
var jsConfig = {
    moduleConfig: {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['es2015']
            }
        }
    },
    pluginConfig: new uglify({
        uglifyOptions: {
            beautify: false, // 最紧凑的输出
            comments: false, // 删除所有的注释
            compress: {
                warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告                
                drop_console: true, // 删除所有的 `console` 语句，还可以兼容ie浏览器
                collapse_vars: true, // 内嵌定义了但是只用到一次的变量
                reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
            }
        }
    }),
};

// 开发环境与生产环境
console.log(encodeURIComponent(process.env.type));
if (process.env.type === 'build') {
    config.output.publicPath = 'https://sluggish.gitee.io/cowfly/dist/';
    config.devtool = 'cheap-module-source-map';
    config.module.rules.push(jsConfig.moduleConfig);
    config.plugins.push(jsConfig.pluginConfig);
} else {
    config.output.publicPath = '/'; // 在本地需要设置为'/'
    config.devtool = 'cheap-module-eval-source-map'; // 打包调试，上线需关掉
}


module.exports = config;